<template>
  <div class="input-select">
    <Input disabled v-model:value="inputValue" />
    <div class="btns" v-if="btns">
      <CloseCircleOutlined
        class="icon"
        title="清除"
        v-if="inputValue"
        @click="handleClear"
      />
      <div class="select" @click="handleSelect">选择</div>
    </div>
  </div>
</template>

<script setup>
import { toRefs } from "vue";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import { Input } from "ant-design-vue";

const props = defineProps({
  // 绑定的字段
  inputValue: {
    type: null,
    default: null,
  },
  // 点击方法
  click: {
    type: Function,
    default: null,
  },
  // 清除返回指定类型
  clearReturnType: {
    type: null,
    default: null,
  },
  // 按钮是否显示
  btns: {
    type: Boolean,
    default: true,
  },
});
const { inputValue, click, clearReturnType } = toRefs(props);

const emits = defineEmits(["update:inputValue", "clear"]);

// 清除
const handleClear = () => {
  emits("update:inputValue", clearReturnType.value);
  emits("clear");
};

// 选择
const handleSelect = () => {
  click.value && click.value();
};
</script>

<style scoped>
.input-select {
  display: flex;
}
.btns {
  display: flex;
  align-items: center;
  background-color: #3f95ff;
  color: #fff;
  align-items: center;
  padding: 4px 15px;
  border-radius: 6px;
}
.icon {
  margin-right: 10px;
}

.select {
  width: 32px;
  cursor: pointer;
}
</style>
